<template>
  <view class="card_view">
    <image class="card_bgv" :src="bgv_src" mode="aspectFill" />
    <view class="card_round_top_view"></view>
    <view class="card_line_view"></view>
    <view class="card_round_bottom_view"></view>


    <view class="card_inside_view">
      <view class="left_view">
        <view class="text_view">

          <view class="card_title">
            {{item.title}}
          </view>
          <view class="tip_views">
            <view class="tip_txt">{{item.tip}}</view>
            <view class="tip_txt tip_text2">{{item.num}}张</view>
          </view>
          <view class="address_view">
            <image class="position_img" src="/static/position_white.png" mode="aspectFill" />
            <view class="position_txt">
              {{item.position}}
            </view>
          </view>
        </view>
        <view class="logo_view">
          <image class="logo_img" :src="item.logo" mode="aspectFill" />
        </view>
      </view>
      <view class="right_view">
        <view class="day_text">
          {{item.day}}
        </view>
        <view class="time_house">
          {{item.time}}
        </view>
        <image class="qrcode_img" src="/static/qrcode.png" mode="aspectFill" />
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    name: "card",
    props: {
      item: Object
    },
    data() {
      return {
        bgImgs: [
          '/static/type/ychbg.png',
          '/static/type/yyjbg.png',
          '/static/type/jcycbg.png',
          '/static/type/tyssbg.png',
          '/static/type/jqzhbg.png',
        ],
      }
    },
    computed: {
      bgv_src: function() {
        if (this.item.tip == "演唱会") {
          return '/static/type/ychbg.png'
        } else if (this.item.tip == "音乐节") {
          return '/static/type/yyjbg.png'
        } else if (this.item.tip == "剧场演出") {
          return '/static/type/jcycbg.png'
        } else if (this.item.tip == "体育赛事") {
          return '/static/type/tyssbg.png'
        } else {
          return '/static/type/jqzhbg.png'
        }
      }
    },
  }
</script>

<style scoped lang="scss">
  .card_view {
    width: 90%;
    height: 140px;
    margin: 10px 5%;
    position: relative;

    .card_bgv {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }

    .card_round_top_view {
      position: absolute;
      width: 20px;
      height: 10px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      top: 0;
      left: 70%;
      background-color: white;
    }

    .card_line_view {
      position: absolute;
      width: 0;
      height: 100%;
      top: 0;
      left: calc(70% + 10px);
      border-left: white 1px dashed;
    }

    .card_round_bottom_view {
      position: absolute;
      width: 20px;
      height: 10px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      bottom: 0;
      left: 70%;
      background-color: white;
    }

    .card_inside_view {
      height: 120px;
      position: absolute;
      top: 20px;
      // width: 90%;
      // left: 5%;
    }

    .left_view {
      width: 75%;
      height: 100%;
      float: left;
      display: flex;
      justify-content: space-between;

      .text_view {
        width: 60%;
        height: 100%;
        padding-left: 15px;

        .card_title {
          width: 100%;
          height: 40px;
          line-height: 20px;
          font-size: 13px;
          font-weight: 600;
          color: #ffffff;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .tip_views {
          margin-top: 15px;
          width: 100%;
          height: 25px;
          font-weight: 500;

          .tip_txt {
            background-color: rgba(255, 255, 255, 0.2);
            font-size: 12px;
            text-align: center;
            padding: 0 5px;
            height: 25px;
            line-height: 25px;
            border-radius: 4px;
            color: white;
            float: left;
          }

          .tip_text2 {
            margin-left: 10px;
          }
        }

        .address_view {
          margin-top: 12px;
          width: 100%;
          height: 20px;
          display: flex;
          align-items: center;

          .position_img {
            width: 12px;
            height: 12px;
            float: left;
          }

          .position_txt {
            line-height: 20px;
            margin-left: 10px;
            font-size: 12px;
            font-weight: 400;
            float: left;
            color: white;
          }
        }
      }

      .logo_view {
        width: 30%;
        height: 100%;
        margin-left: 10px;

        .logo_img {
          width: 50px;
          height: 66px;
          border-radius: 10px;
          // margin-left: 15px;
        }
      }
    }

    .right_view {
      width: 25%;
      height: 100%;
      float: right;

      .day_text {
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 10px;
        font-family: PingFang SC, PingFang SC-400;
        font-weight: 400;
        color: white;
      }

      .time_house {
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 18px;
        font-family: PingFang SC, PingFang SC-600;
        font-weight: 600;
        color: white;
      }

      .qrcode_img {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 5px;
        bottom: 5px;
      }
    }
  }
</style>